<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { useRoute, useRouter } from 'vue-router';
import { regcodeverify } from '@/api/user';
import { message } from 'ant-design-vue';
import { UserOutlined, PhoneOutlined } from '@ant-design/icons-vue';
interface RegisterForm {
  account: string;
  code: string;
}
const formRef = ref();
const router = useRouter();
const formState = reactive<RegisterForm>({
  account: '',
  code: '',
});


const rules = reactive({
  account: [
    { required: true, message: '请输入账号名称' },
    {
      pattern: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/,
      message: '账号名称必须是以字母开头且长度6-20的字母或数字',
      trigger: 'blur',
    },
  ],
  username: [{ required: true, message: '请输入昵称' }],
  mobile_phone: [
    { required: true, message: '请输入验证码' },
    {
      type: 'string',
      message: '请输入正确的验证码格式',
    },
  ], 

});

const registerFn = async (values: RegisterForm) => {
  let params = {
    account: values.account,
    code: values.code
  }
  console.log(params);
  const res: any = await regcodeverify(values.account, values.code);
  console.log(res)
  if (res.code === 10000) {
  message.success('注册成功');
  router.push({ path: '/login' });
  } else if (res.code === 10002) {
    message.error('账号已存在, 请激活该账号');
  } else {
    console.log('res', res);
    message.error(res.message || '注册失败');
  }
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const goLogin = () => {
  router.push({ path: '/login' });
};

</script>

<template>
  <div id="register">
    <div class="register_box">
      <div class="left_register_img">
        <img src="/assets/image/login.png" alt="" />
      </div>
      <div class="right_register_form_box">
        <div class="form_title">
          <div>平台注册</div>
        </div>
        <div class="register_form">
          <a-form
            ref="formRef"
            :model="formState"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 24 }"
            autocomplete="off"
            @finish="registerFn"
            @finishFailed="onFinishFailed"
            :rules="rules"
          >
            <a-form-item name="account">
              <a-input
                class="large_height"
                v-model:value="formState.account"
                placeholder="请输入注册过的账号"
                style="width: 360px"
                autocomplete="account"
              >
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="code">
              <a-input
                class="large_height"
                v-model:value="formState.code"
                placeholder="请输入手机验证码"
                style="width: 360px"
                autocomplete="code"
              >
                <template #prefix>
                  <PhoneOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
              <a-button type="primary" html-type="submit" class="large_height" style="width: 360px">注册</a-button>
            </a-form-item>
          </a-form>
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex; align-items: center">
              <a-button type="link" @click="goLogin">去登录</a-button>
            </div>
            <!-- <a-tooltip placement="bottom" color="#FFFFFF">
              <a-button type="link">忘记密码</a-button>
            </a-tooltip> -->
          </div>
        </div>
      </div>
    </div>
    <div class="company_inf">Copyright ©2024 陈维龙毕业设计</div>
    <!-- <div class="iict_wx">
      <img src="../../assets/image/iict.jpg" />
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
@import './register.scss';

.fold_info {
  // display: flex;
  // justify-content: space-around;
  // font-weight: 700;
  color: black;
}

.selectable-span {
  cursor: text;
  /* 鼠标光标设置为文本光标 */
  user-select: text;
  /* 允许用户选中元素中的内容 */
}
</style>
